<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<form id="permissionForm">
  <input th:if="${resource?.id != null}"
         name="id"
         type="hidden"
         th:value="${resource?.id}">
  <input type="hidden" class="form-control" id="detailParentId" name="parentId" th:value="${resource.parentId}">
  <input type="hidden" class="form-control" id="detailParentType" name="parentType" th:value="${parentType}">
  <div th:if="${resource?.id == null}" class="form-group row">
    <label class="col-sm-2 col-form-label">类型:</label>
    <div class="col-sm-10">
      <label class="radio-inline pr-5">
        <input type="radio" name="type" value="1" checked> 目录
      </label>
      <label class="radio-inline pr-5">
        <input type="radio" name="type" value="2"> 菜单
      </label>
      <label class="radio-inline pr-5">
        <input type="radio" name="type" value="3"> 按钮
      </label>
    </div>
  </div>
  <div th:if="${resource?.id != null}" class="form-group row">
    <label class="col-sm-2 col-form-label">类型:</label>
    <div class="col-sm-10">
      <label class="radio-inline pr-5">
        <input type="radio" th:checked="${resource.type eq 1}" name="type" value="1" disabled> 目录
      </label>
      <label class="radio-inline pr-5">
        <input type="radio" th:checked="${resource.type eq 2}" name="type" value="2" disabled> 菜单
      </label>
      <label class="radio-inline pr-5">
        <input type="radio" th:checked="${resource.type eq 3}" name="type" value="3" disabled> 按钮
      </label>
    </div>
  </div>
  <div class="form-group row">
    <label for="name" class="col-sm-2 col-form-label">资源名称</label>
    <div class="col-sm-10">
      <input type="text" th:value="${resource?.name}" name="name" class="form-control" id="name"
             placeholder="请填写资源名称" required>
    </div>
    <div class="invalid-feedback">请填写资源名称</div>
  </div>
  <div th:style="${resource.type != 1 ? '' : 'display:none'}" class="form-group row parentFlag">
    <label for="detailParentMenu" class="col-sm-2 col-form-label">上级资源</label>
    <div class="col-sm-10" style="position: relative">
      <input type="text" class="form-control cursor-pointer" id="detailParentMenu"
             th:value="${parentName}" onclick="showMenu()" readonly="readonly">
      <div class="ztree"  style="display:none; position: absolute; width:200px;">
        <ul id="resourceTree"
            style="position:absolute;z-index:1;overflow:hidden;background-color: white;width:100%;
        border:1px solid #4aa5ff;"></ul>
        <!-- zTree树状图 相对定位在其下方 -->
      </div>
      <div class="invalid-feedback">请选择上级资源</div>
    </div>
  </div>
  <div th:style="${resource.type == 2 ? '' : 'display:none'}" class="form-group row urlFlag">
    <label for="url" class="col-sm-2 col-form-label">资源url</label>
    <div class="col-sm-10">
      <input type="text" th:value="${resource?.url}" name="url" class="form-control" id="url"
             placeholder="请填写资源url" th:attr="required=${resource.type == 2 ? 'required' : null}">
      <div class="invalid-feedback">请填写资源url</div>
    </div>
  </div>
  <div th:style="${resource.type != 1 ? '' : 'display:none'}" class="form-group row permissionFlag">
    <label for="permission" class="col-sm-2 col-form-label">所需权限</label>
    <div class="col-sm-10">
      <input type="text" th:value="${resource?.permission}" name="permission" class="form-control" id="permission"
             placeholder="请填写所需权限" th:attr="required=${resource.type != 1 ? 'required' : null}">
      <div class="invalid-feedback">请填写所需权限</div>
    </div>
  </div>
  <div class="form-group row menuFlag sortFlag">
    <label for="sort" class="col-sm-2 col-form-label">排序</label>
    <div class="col-sm-10">
      <input type="number" th:value="${resource?.sort}" name="sort" class="form-control" id="sort"
             placeholder="请填写排序" required>
      <div class="invalid-feedback">请填写排序</div>
    </div>
  </div>
  <div th:style="${resource.type != 3 ? '' : 'display:none'}" class="form-group row iconFlag">
    <label for="icon" class="col-sm-2 col-form-label">图标</label>
    <div class="col-sm-10">
      <input type="text" th:value="${resource?.icon}" name="icon" class="form-control" id="icon"
             placeholder="请填写图标" th:attr="required=${resource.type != 3 ? 'required' : null}">
      <div class="invalid-feedback">请填写图标</div>
    </div>
  </div>
</form>

<script type="text/javascript">

  // 图标选择器
  $(function () {
    $('#icon').iconpicker({animation: false});

    // 初始化tree
    initTree();
  })

  /**
   * 给radio绑定点击事件
   * 主要是对于3中类型的资源需要展示不同的填写信息
   */
  $('input:radio[name="type"]').on("click", function () {
    initPermissionForm();
    var menuType = $('input:radio[name="type"]:checked').val();
    if (menuType === "1") {
      $(".parentFlag").hide();
      $(".urlFlag").hide();
      $(".permissionFlag").hide();
      $(".sortFlag").show();
      $(".iconFlag").show();
      $('#url').removeAttr('required')
      $('#permission').removeAttr('required')
      $('#sort').attr('required', true)
      $('#icon').attr('required', true)
    }
    if (menuType === "2") {
      $(".parentFlag").show();
      $(".urlFlag").show();
      $(".permissionFlag").show();
      $(".sortFlag").show();
      $(".iconFlag").show();
      $('#url').attr('required', true)
      $('#permission').attr('required', true)
      $('#sort').attr('required', true)
      $('#icon').attr('required', true)
    }
    if (menuType === "3") {
      $(".parentFlag").show();
      $(".urlFlag").hide();
      $(".permissionFlag").show();
      $(".sortFlag").show();
      $(".iconFlag").hide();
      $('#url').removeAttr('required')
      $('#permission').attr('required', true)
      $('#sort').attr('required', true)
      $('#icon').removeAttr('required')
    }
  })

  function initPermissionForm() {
    $("#detailParentId").val("");
    $("#detailParentMenu").val("");
    $("#name").val("");
    $("#url").val("");
    $("#permission").val("");
    $("#sort").val("");
    $("#icon").val("");
  }

  /**
   * 初始化树结构的菜单
   */
  function initTree() {
    var ztree;
    //树-初始化设置
    var treeSetting = {
      data: {
        simpleData: {
          enable: true,
          idKey: "id",
          pIdKey: "parentId"
        }
      },
      //回调
      callback: {
        onClick: zTreeOnClick
      },
    };
    Core.postAjax('/sys/resource/all?flag=1', null, function (data) {
      $.each(data, function (i, item) {
        item.open = true;
      })
      ztree = $.fn.zTree.init($("#resourceTree"), treeSetting, data);
    });
  }

  /**
   * 点击节点调用的方法。由于点击的节点是选择的父节点，所以这个方法的作用就是给相关的dom元素赋值父节点的信息
   * @param event 事件对象
   * @param treeId 树id
   * @param node 节点对象
   */
  function zTreeOnClick(event, treeId, node) {
    // 赋值父节点的类型
    $("#detailParentType").val(node.type);
    // 赋值父节点的id
    $("#detailParentId").val(node.id);
    // 赋值父节点的名称
    $("#detailParentMenu").val(node.name);
    hideTree();
  }

  /**
   * 显示树结构的菜单信息
   */
  function showMenu() {
    if($('.ztree').css('display') == 'none'){
      $('.ztree').css('display','block');
    } else{
      $('.ztree').css('display','none');
    }
    $("body").bind("mousedown", onBodyDownByActionType);
  }
  function hideTree() {
    $('.ztree').css('display','none');
    $("body").unbind("mousedown", onBodyDownByActionType);
    return false;
  }

  // 区域外点击事件
  function onBodyDownByActionType(event) {
    if (event.target.id.indexOf('resourceTree') == -1){
      if(event.target.id != 'selectDevType'){
        hideTree();
      }
    }
  }
</script>